<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none';"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Synthwave '84: What's new</title>
  <style>
    .main {
      max-width: 780px;
      width: calc(100% - 40px);
      margin: 10px auto;
    }

    p {
      line-height: 1.45;
      font-size: 0.85rem;
    }

    p + h2 {
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1>Synthwave has changed</h1>
    <img src="https://github.com/robb0wen/synthwave-vscode/raw/master/banner.png" alt="Synthwave '84 logo over a cityscape" style="max-width:100%;">
    <p>It's been a wild ride since I first tweeted about Synthwave '84. The support has been amazing and I'd like to say thanks everyone who has shared or used the theme since the last release. I'd particularly like to thank you all for battling through the <i>less than ideal</i> glow installation process. It's been truly great to see so many people enjoying the theme.</p>
    <p>Thank you all 🙏</p>

    <h2>Neon Dreams</h2>
    <p>This v0.1.0 update marks a changing point for the theme. Recent Updates to VS code broke compatibility with the CSS needed to enable the glow and it had become clear that a more maintainable and long-term solution would be needed.</p>
    <p>This new update, called Neon Dreams, removes the need to use the <i>Custom CSS and JS</i> extension to enable the glow. It also rethinks how to apply the glow, so it should cope better with updates to VS code.</p>

    <h2>Before using</h2>
    <p>If you have been using Synthwave prior to v0.1.0, you will likely have used the Custom CSS and JS extension to enable the glow. Before enabling Neon Dreams, you will need to disable the prior method.</p>
    <p>You can do this by pressing <code>Ctrl + Shift + P</code> or <code>Shift + ⌘ + P</code> and choose "<b>Disable Custom CSS and JS</b>"</p>
    <p>In the name of simplifying the install process and mitigating update-related issues, the new version of Synthwave '84 doesn't use a custom CSS file anymore. <b>If you have been using a custom-modified version of the theme</b>, then you can still continue to use that with the previous Custom CSS and JS method. Otherwise, the following is now the preferred method to enable the glow.</p>
    
    <h2>Start dreaming</h2>
    <p>Firstly, if you are a Windows user, you may need to run VS Code with administrator priviliges. For Linux and Mac users, Code must not be installed in a read-only location and you must have write permissions.</p>
    <p>Once you have admin permissions, open VS Code, and set your active colour theme to Synthwave '84 - the glow is only active when the base theme is selected.</p>
    <p>press <code>Ctrl + Shift + P</code> or <code>Shift + ⌘ + P</code> and choose "<b>Enable Neon Dreams</b>"</p>
    <p>You should be prompted for a restart. When the editor reloads, the glow should be active.</p>
    <p>As with the prior versions, VS Code may warn you that your installation is corrupt. You can suppress this message by choosing 'Don't show this again' from the notification.</p>
    <p>Also as before, whenever VS code updates, you will need to rerun the enable command</p>

    <h2>To customise the glow brightness</h2>
    <p>In your `settings.json` add the key: <code>"synthwave84.brightness": "0.45"</code></p>
    <p>The value should be a _float value_ from 0 to 1, where 00 is fully transparent. The default brightness is 0.45. To avoid eye strain, avoid using higher brightness values for extended periods of time.</p>
    <p><b>To see the changes in your editor, rerun the "Enable Neon Dreams" command.</b></p>
    <p>Note: Changing the brightness currently only affects the opacity of the glow, the text will remain white (that may change in future updates). If you want to disable the glow effect but retain the chrome updates, see below.</p>

    <h2>To enable editor chrome updates, but disable glow</h2>
    <p>In your `settings.json` add the key: <code>"synthwave84.disableGlow": true</code></p>
    <p><b>To see the changes in your editor, rerun the "Enable Neon Dreams" command.</b></p>

  </div>
</body>
</html>